<template>
	<view class="content">
		<view class="hint">
			<view class="row1">
				<view class="left">
					温馨提示：
				</view>
				<view class="right">
					<view>
						1.上传之后，点击图片可以修改或者替换！
					</view>
					<view>
						2.提交之后可以看到生产状态！
					</view>
				</view>
			</view>
			<view class="row2">
				定制类型:
			</view>
			<view>
				订单号:
			</view>
		</view>

		<view class="uploadBox">
			<view class="row1">
				<view class="remind">
					请检查并提交图片 </br>
					所有图片预检完毕
				</view>
				<image src="/static/gou.png" mode=""></image>
				<view class="num">
					本次已选{{fileList1.length}}/10张
				</view>
				<view class="btn" @click="chooseAndUploadImage">
					重新上传
				</view>
			</view>
			<view class="line"></view>
			<view class="text">
				为尊重客户与保护用户隐私，系统已经开启保护隐私生产
			</view>
			<view class="imgBox">
				<view class="img" v-for="(item,index) in fileList1">
					<view class="top">
						留白边过多
						<image src="/static/cha.png" @click="deleteImg(index)"></image>
					</view>
					<view class="center">
						<image :src="item" mode=""></image>
					</view>
					<view class="bottom">
						<image src="/static/copy.png" mode=""></image>
						<image src="/static/cut.png" mode=""></image>
					</view>
				</view>

			</view>
		</view>

		<view class="btnBox">
			<view class="btn">
				选择图片（10/10）
			</view>
			<view class="btn" @click="toIndex()">
				提交图片
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: []
			}
		},
		methods: {
			// 删除图片
			deleteImg(index) {
				this.fileList1.splice(index, 1);
			},
			chooseAndUploadImage() {
				uni.chooseImage({
					count: 10, // 最多可以选择的图片张数
					success: (res) => {
						console.log(res.tempFilePaths);
						this.fileList1 = res.tempFilePaths;
						// this.uploadImage(tempFilePaths[0]);
					},
					fail: (err) => {
						console.error('选择图片失败', err);
					}
				});
			},
			uploadImage(filePath) {
				uni.uploadFile({
					url: 'http://192.168.3.146:8080/h5/file/upload', // 替换为实际的服务器上传接口地址
					filePath: filePath,
					name: 'file',
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('图片上传成功', res.data);
						} else {
							console.error('图片上传失败', res.errMsg);
						}
					},
					fail: (err) => {
						console.error('图片上传失败', err);
					}
				});
			},
			toIndex(){
				let path = '/pages/index/index?data='+this.fileList1.toString()
				console.log(path)
				uni.navigateTo({
					url:"/pages/index/index",
					success: () => {
						// 通过事件总线或全局状态管理传递数据
						uni.$emit('fileList1', this.fileList1.toString());
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		max-width: 800px;
		background-color: #B9DCD5;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.hint {
		margin-top: 20rpx;
		font-weight: 700;
		font-size: 26rpx;
		width: 92%;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		background-color: white;
		opacity: 0.5;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		color: black;

		.row1 {
			display: flex;
			line-height: 50rpx;
		}
	}

	.uploadBox {
		margin-top: 20rpx;
		width: 92%;
		height: 1200rpx;
		background-color: white;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.row1 {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			width: 97%;

			.remind {
				color: #81B337;
				font-size: 26rpx;
				font-weight: 700;
			}

			image {
				width: 44rpx;
				height: 44rpx;
				margin-left: 5rpx;
			}

			.num {
				margin-left: 20rpx;
			}

			.btn {
				font-size: 24rpx;
				border: 1rpx solid black;
				padding: 10rpx;
				border-radius: 10rpx;
				margin-left: auto;
				transform: translateX(-20%);
			}
		}

		.line {
			border-top: 1rpx solid #A7A7A7;
			width: 94%;
			margin-top: 5rpx;
		}

		.text {
			margin-top: 10rpx;
			font-size: 25rpx;
			color: #FCB6B7;
			font-weight: 700;
		}

		.imgBox {
			margin-top: 30rpx;
			width: 90%;
			height: 980rpx;
			border-radius: 20rpx;
			box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1),
				/* 下深色阴影 */
				0 5px 10px rgba(0, 0, 0, 0.3),
				/* 左深色阴影 */
				-2px 0 2px rgba(0, 0, 0, 0.1),
				/* 右深色阴影 */
				2px 0 2px rgba(0, 0, 0, 0.1);
			padding: 20rpx 15rpx;
			display: grid;
			grid-template-columns: 200rpx 200rpx 200rpx;
			gap: 10rpx;
			background-color: #F6F5F7;

			.img {
				background-color: #A7A7A7;
				width: 100%;
				height: 400rpx;
				float: left;
				margin-right: 3%;

				.top {
					font-size: 20rpx;
					width: 100%;
					text-align: center;
					line-height: 40rpx;
					color: #CD4747;

					image {
						width: 30rpx;
						height: 30rpx;
						float: right;
					}
				}

				.center {
					background-color: white;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 320rpx;

					image {
						height: 300rpx;
						width: 90%;
						border: 5rpx solid white;
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					width: 70%;
					margin-left: 15%;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}


	}

	.btnBox {
		width: 86%;
		display: flex;
		justify-content: space-between;

		.btn {
			margin-top: 40rpx;
			padding: 24rpx 0;
			box-shadow: 2rpx 4rpx 4rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			width: 300rpx;
			text-align: center;
			background-color: #81B337;
			color: white;
		}
	}
</style>